<template>
    <div >
        <div class="header clearfix">
            当前使用跑腿价格方案：<span style="color:#409EFF;font-size: 16px;">{{defaultPlan}}</span>
            <el-button type="success" style="float:right;margin-left: 20px;" @click="clearAndOpenPlanDialog(1)">添加方案</el-button>
        </div>
        <div class="main">
            <div class="big-title">
                方案设置:
            </div>
            <div style="text-align: center;color:#a6a6a6;" v-if="planlist.length == 0">
                暂无方案，请添加方案
            </div>
            <div class="change clearfix" v-else>
                <el-radio-group style="float:left;margin-top: 8px;" v-model="radio">
                    <el-radio v-for="(item,index) in planlist" :key="item.id" :label="item.id" style="line-height:40px;">{{item.name}}</el-radio>
                </el-radio-group>
            </div>
            <ul class="preview">
                <li v-for="(item,index) in planlist " :key="item.id" v-show="item.id == radio">
                    <div class="list clearfix">
                        <div class="wrap" style="float: left;margin-right: 150px;">
                            <div class="title"> 距离：</div>
                            <ul>
                                <li>
                                    <span>{{item.startDistance?item.startDistance+'公里内':'系统默认最大距离内'}}</span>
                                    <span class="right">{{item.startDistancePrice}}元</span>
                                </li>
                                <li v-if="item.firstDistancePrice">
                                    <span v-if="item.firstDistance">{{item.startDistance}}~{{item.firstDistance}}公里</span>
                                    <span v-else>{{item.startDistance}}公里以上</span>
                                    <span class="right">每公里/{{item.firstDistancePrice}}元</span>
                                </li>
                                <li v-if="item.secondDistancePrice">
                                    <span v-if="item.secondDistance">{{item.firstDistance}}~{{item.secondDistance}}公里</span>
                                    <span v-else>{{item.firstDistance}}公里以上</span>
                                    <span class="right">每公里/{{item.secondDistancePrice}}元</span>
                                </li>
                                <li v-if="item.thirdDistancePrice">
                                    <span v-if="item.thirdDistance">{{item.secondDistance}}~{{item.thirdDistance}}公里</span>
                                    <span v-else="">{{item.secondDistance}}公里以上</span>
                                    <span class="right">每公里/{{item.thirdDistancePrice}}元</span>
                                </li>
                                <li v-if="item.fourthDistancePrice">
                                    <span v-if="item.fourthDistance">{{item.thirdDistance}}~{{item.fourthDistance}}公里</span>
                                    <span v-else>{{item.thirdDistance}}公里以上</span>
                                    <span class="right">每公里/{{item.fourthDistancePrice}}元</span>
                                </li>
                            </ul>
                        </div>
                        <div class="wrap clearfix" style="float: left;">
                            <div class="title"> 重量：</div>
                            <ul>
                                <li>
                                    <span>{{item.startWeight?item.startWeight+'KG内':'系统默认最大重量内'}}</span>
                                    <span class="right">{{item.startWeightPrice}}元</span>
                                </li>
                                <li v-if="item.firstWeightPrice">
                                    <span v-if="item.firstWeight">{{item.startWeight}}~{{item.firstWeight}}KG</span>
                                    <span v-else>{{item.startWeight}}KG以上</span>
                                    <span class="right">每KG/{{item.firstWeightPrice}}元</span>
                                </li>
                                <li v-if="item.secondWeightPrice">
                                    <span v-if="item.secondWeight">{{item.firstWeight}}~{{item.secondWeight}}KG</span>
                                    <span v-else>{{item.firstWeight}}KG以上</span>
                                    <span class="right">每KG/{{item.secondWeightPrice}}元</span>
                                </li>

                            </ul>
                        </div>
                    </div>
                    <div class="operation">
                        <el-button  :loading="isloading2" type="primary"  @click="chosePlan(item.id,item.name)">使用</el-button>
                        <el-button  :loading="isloading3" type="danger" icon="el-icon-delete" style="margin-left: 20px;" @click="deletePlan(item.id)">删除</el-button>
                        <el-button  type="success" icon="el-icon-edit" style="margin-left: 20px;" @click="clearAndOpenPlanDialog(2,index)">修改</el-button>
                    </div>
                </li>

            </ul>
        </div>

        <el-dialog :title="addOrEdit+'方案'" v-dialogDrag :visible.sync="dialogTableVisible" width="650px"
                   :modal="false" :close-on-click-modal="false">
            <div>
                <div style="font-weight: 500;font-size: 15px;">方案名称：
                    <el-input id="pricePlanName" v-model="name" placeholder="请输入方案名称" style="display: inline-block;width: 300px;"></el-input>
                </div>
                <div style="margin-top: 15px;font-weight: 500;font-size: 15px;">设置距离：
                </div>
                <ul class="show-list">
                    <li class="clearfix" v-for="(items,index,key) in distance" >
                        <div class="left-p" v-if="index != 0">
                            <el-input v-model="distance[index-1].step" disabled="disabled" style="display: inline-block;width: 100px;"></el-input>
                            <span>~</span>
                        </div>
                        <div class="center-p set-de" >
                            <el-select v-model="items.step" style="width: 100px" @change="selectDistance(index)" :disabled="index >0?distance[index-1].step==null||distance[index-1].step==null:false"  placeholder="--">
                                <el-option v-if="!(index > 0? (item <= distance[index-1].step):false)"
                                        v-for="item in options1" :key="item" :label="item" :value="item">
                                </el-option>
                            </el-select>
                            <span>{{index !=0?'每公里超出部分':'公里及以内'}}</span>
                        </div>

                        <div v-if="items.step && (index <=3?distance[index+1].step==null||distance[index+1].step==null:false||index == 4)" class="reat-p" @click="clearDistanceItem(index)">
                            <el-button type="info" icon="el-icon-close"  class="clear" round size="mini"></el-button>
                        </div>

                        <div class="right-p">
                            <span>{{index != 0 ?'每公里增加':'收费'}}</span>
                            <el-input v-model="items.price" type="number" style="display: inline-block;width: 100px;" :disabled="index >0?distance[index-1].step==null||distance[index-1].step==null:false" :id="'input-d'+index" ></el-input>
                            <span>元</span>
                        </div>
                    </li>
                </ul>
                <div style="margin-top: 15px;font-weight: 500;font-size: 15px;">设置重量：</div>
                <ul class="show-list">
                    <li class="clearfix" v-for="(items,index,key) in weight">
                        <div class="left-p" v-if="index != 0">
                            <el-input v-model="weight[index-1].step" disabled="disabled" style="display: inline-block;width: 100px;"></el-input>
                            <span>~</span>
                        </div>
                        <div class="center-p set-de">
                            <el-select v-model="items.step" style="width: 100px" @change="selectWeight(index)" :disabled="index >0?weight[index-1].step==null||weight[index-1].step=='':false"  placeholder="--">
                                <el-option v-if="!(index > 0? (item <= weight[index-1].step):false)"
                                        v-for="item in options2" :key="item" :label="item" :value="item">
                                </el-option>
                            </el-select>
                            <span>{{index != 0?'KG的超出部分':'KG及以内'}}</span>
                        </div>

                        <div v-if="items.step && (index <=1?weight[index+1].step==null||weight[index+1].step==null:false||index == 2)" class="reat-p" @click="clearWeightItem(index)">
                            <el-button type="info" icon="el-icon-error"  class="clear" round size="mini"></el-button>
                        </div>

                        <div class="right-p">
                            <span>{{index != 0 ?'每KG增加':'收费'}}</span>
                            <el-input v-model="items.price" type="number"  style="display: inline-block;width: 100px;"  :disabled="index >0?weight[index-1].step==null ||weight[index-1].step=='':false" :id="'input-w'+index"></el-input>
                            <span>元</span>
                        </div>
                    </li>
                </ul>
                <div class="footer" style="text-align: center;margin-top: 40px; padding-bottom: 20px;">
                    <el-button :loading="isloading1" type="primary"  @click="addsubmit()">{{addOrEdit}}</el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                defaultPlan:'未选择方案',                 //默认方案
                defaultPlanId:'',                //默认方案id
                dialogTableVisible:false,       //控制打开添加或修改对话框
                addOrEdit:'',                   //添加/修改 文本提示
                addOrEditType:'',               //添加/修改状态 1或2
                isloading1:false,               //添加/修改
                isloading2:false,               //使用
                isloading3:false,               //删除
                name:'',                        //提交或修改的方案名称
                distance:[],                    //提交或修改的距离阶梯
                weight:[],                      //提交或修改的重量阶梯
                options1:10,                    //最大距离
                options2:10,                    //最大重量
                radio:'',                       //当前选择方案id
                planlist:[]                     //所有方案
            };
        },
        methods:{
            clearDistanceItem(index){        //距离当前层清除距离选择
                this.distance[index].step =null
                if(index<= this.distance.length -2){
                    this.distance[index+1].price = null
                }
            },
            clearWeightItem(index){             //重量当前层清除距离选择
                this.weight[index].step =null
                if(index<= this.weight.length -2){
                    this.weight[index+1].price = null
                }
            },
            selectDistance(cur){             //下拉价格
                let val = this.distance[cur].step
                this.distance.forEach((item,index)=>{
                    if(cur< index ){
                        this.distance[index].step = null
                        if(index <= this.distance.length -2){
                            this.distance[index+1].price = null
                        }

                    }
                })
            },
            selectWeight(cur){              //下拉重量
                let val = this.weight[cur].step
                this.weight.forEach((item,index)=>{
                    if(cur< index ){
                        this.weight[index].step = null
                        if(index <= this.weight.length -2){
                            this.weight[index+1].price = null
                        }

                    }
                })
            },
            alertNoprice(msg,title){            //弹出提示
                this.$alert(msg?msg:'当前阶梯未设置价格', title?title:'提交方案提示！', {
                    confirmButtonText: '确定',
                    closeOnPressEscape:true,
                    callback: action => {}
                })
            },
            clearAndOpenPlanDialog(type,index){      //打开对话框 并清除方案对话框内容
                this.dialogTableVisible = true
                if(type == 1){
                    this.addOrEdit = '添加'
                    this.addOrEditType = type
                    this.name = ''
                    this.distance = [
                        {step:null,price:null},
                        {step:null,price:null},
                        {step:null,price:null},
                        {step:null,price:null},
                        {step:null,price:null},
                    ]
                    this.weight =[
                        {step:null,price:null},
                        {step:null,price:null},
                        {step:null,price:null},
                    ]
                }else if(type == 2){
                    this.addOrEdit = '修改'
                    this.addOrEditType = type
                    let list = this.planlist[index]
                    this.name = list.name
                    this.distance = [
                        {
                            step:list.startDistance==null?null:list.startDistance.toString(),
                            price:list.startDistancePrice==null?null:list.startDistancePrice.toString()
                        },
                        {
                            step:list.firstDistance==null?null:list.firstDistance.toString(),
                            price:list.firstDistancePrice==null?null:list.firstDistancePrice.toString()},
                        {
                            step:list.secondDistance==null?null:list.secondDistance.toString(),
                            price:list.secondDistancePrice==null?null:list.secondDistancePrice.toString()
                        },
                        {
                            step:list.thirdDistance==null?null:list.thirdDistance.toString(),
                            price:list.thirdDistancePrice==null?null:list.thirdDistancePrice.toString()
                        },
                        {
                            step:list.fourthDistance==null?null:list.fourthDistance.toString(),
                            price:list.fourthDistancePrice==null?null:list.fourthDistancePrice.toString()
                        },
                    ],
                    this.weight =[
                        {
                            step:list.startWeight==null?null:list.startWeight.toString(),
                            price:list.startWeightPrice==null?null:list.startWeightPrice.toString()
                        },
                        {
                            step:list.firstWeight==null?null:list.firstWeight.toString(),
                            price:list.firstWeightPrice==null?null:list.firstWeightPrice.toString()
                        },
                        {
                            step:list.secondWeight==null?null:list.secondWeight.toString(),
                            price:list.secondWeightPrice==null?null:list.secondWeightPrice.toString()
                        },
                    ]
                    //请求当前方案数据
                }
            },
            addsubmit(){                         //提交方案或修改方案
                let sure = true
                if(!this.name){        //方案名称验证
                    this.alertNoprice('当前方案名称不能为空！','提交方案提示！')
                    document.getElementById('pricePlanName').focus()
                    return
                }
                //至少第一阶梯的价格不能为空， 距离可以为空，但表示无限距离价格都一样
                if(!this.distance[0].price){      //距离第一层价格不能为空
                    this.alertNoprice()
                    document.getElementById('input-d0').focus()
                    return

                } else  if(!this.weight[0].price){    //重量 第一层价格不能为空
                    this.alertNoprice()
                    document.getElementById('input-w0').focus()
                    return
                }

                this.distance.forEach((item,index)=>{     //距离 当前层价格不能为空
                    if (!sure) return false
                    if((item.step && !item.price) ) {
                        this.alertNoprice()
                        document.getElementById('input-d' + index).focus()
                        sure = false
                    }else if(item.step &&index <= this.distance.length - 2 && this.distance[index+1].price ==null) {
                        this.alertNoprice()
                        document.getElementById('input-d' + (index + 1)).focus()
                        sure = false
                    }
                })

                this.weight.forEach((item,index)=>{    //重量 当前层价格不能为空
                    if (!sure) return false
                    if((item.step && !item.price)) {
                        this.alertNoprice()
                        document.getElementById('input-w' + index).focus()
                        sure = false
                    }else if(item.step &&index <= this.weight.length - 2 && this.weight[index+1].price ==null){
                        this.alertNoprice()
                        document.getElementById('input-w' + (index + 1)).focus()
                        sure = false
                    }
                })
                if(sure){
                    let  params = {
                        name:this.name,
                        startDistance:this.distance[0].step,
                        startDistancePrice:this.distance[0].price,
                        firstDistance:this.distance[1].step,
                        firstDistancePrice:this.distance[1].price,
                        secondDistance:this.distance[2].step,
                        secondDistancePrice:this.distance[2].price,
                        thirdDistance:this.distance[3].step,
                        thirdDistancePrice:this.distance[3].price ,
                        fourthDistance:this.distance[4].step,
                        fourthDistancePrice:this.distance[4].price,
                        startWeight:this.weight[0].step,
                        startWeightPrice:this.weight[0].price,
                        firstWeight:this.weight[1].step,
                        firstWeightPrice:this.weight[1].price,
                        secondWeight:this.weight[2].step,
                        secondWeightPrice:this.weight[2].price,
                    }

                    if(this.addOrEditType ==1){
                        this.isloading1 = true
                        this.$http.post('/server/pricePlan/save',this.qs.stringify(params))
                            .then(res => {
                                this.isloading1 = false
                                const datas = res.data
                                if(datas.success){
                                    this.dialogTableVisible = false
                                    this.getPlanList()
                                }else{
                                    this.alertNoprice(datas.errorMsg,'添加方案提示！')
                                }
                            })
                            .catch(err => {
                                this.isloading1 = false
                            })
                    }else if(this.addOrEditType == 2){
                        params.id = this.radio
                        this.isloading1 = true
                        this.$http.post('/server/pricePlan/updata',this.qs.stringify(params))
                            .then(res => {
                                this.isloading1 = false
                                const datas = res.data
                                if(datas.success){
                                    this.dialogTableVisible = false
                                    this.getPlanList()
                                }else{
                                    this.alertNoprice(datas.errorMsg,'修改方案提示！')
                                }
                            })
                            .catch(err => {   //报错信息 已被自定义 见 main.js axios 拦截器
                                this.isloading1 = false

                            })
                    }

                }

            },
            chosePlan(id,name){                            //选择方案
                if(this.defaultPlanId &&id == this.defaultPlanId){
                    this.alertNoprice('当前方案已是默认方案！','选择默认方案提示！')
                    return false
                }
                this.isloading2 = true
                let params = {id:id}
                this.$http.post('/server/pricePlan/default',this.qs.stringify(params))
                    .then(res => {
                        this.isloading2 = false
                        const datas = res.data
                        if(datas.success){
                            this.defaultPlan = name
                            this.defaultPlanId = id
                            this.alertNoprice('当前默认方案已切换为：'+name,'选择默认方案提示！')
                        }else{
                            this.alertNoprice(datas.errorMsg,'选择默认方案提示！')
                        }
                    })
                    .catch(err => {   //报错信息 已被自定义 见 main.js axios 拦截器
                        this.isloading2 = false
                        if(!err.Cancel){
                            console.log(err)
                        }
                    })
            },
            deletePlan(id){                         //删除方案
                this.isloading3

                let params = {id:id}
                this.$http.post('/server/pricePlan/delete',this.qs.stringify(params))
                    .then(res => {
                        this.isloading3 = false
                        const datas = res.data
                        if(datas.success){
                            this.dialogTableVisible = false
                            this.getPlanList()
                        }else{
                            this.alertNoprice(datas.errorMsg,'删除方案提示！')
                        }
                    })
                    .catch(err => {   //报错信息 已被自定义 见 main.js axios 拦截器
                        this.isloading3 = false
                        if(!err.Cancel){
                            console.log(err)
                        }
                    })
            },
            getPlanList(){                     //获取方案列表
                this.$http.get('/server/pricePlan/list')
                    .then(res => {
                        const datas = res.data
                        if(datas.success){
                            let data = datas.data
                            if(data.list.length >0){
                                this.$set(this.$data,'planlist',data.list)
                                if(datas.data.defaultPlan){
                                    this.defaultPlan = datas.data.defaultPlan.name
                                    this.radio = datas.data.defaultPlan.id
                                    this.defaultPlanId = datas.data.defaultPlan.id
                                }else{
                                    this.radio = data.list[0].id
                                }
                            }

                        }else{
                            this.alertNoprice(datas.errorMsg,'获取方案列表提示！')
                        }
                    })
                    .catch(err => {   //报错信息 已被自定义 见 main.js axios 拦截器
                        this.isloading = false
                        if(!err.Cancel){
                            console.log(err)
                        }
                    })
            }
        },
        mounted() {
            this.getPlanList()
        },
    }
</script>
<style scoped>

    .header{
        padding: 10px 15px;
        line-height:30px;
        background: #fff;
        font-size: 16px;
        color:#333;
        font-weight: 500;
    }
    .main{
        border-top:1px solid #e5e5e5;
        background: #fff;
        padding: 0 15px 20px 15px;
    }
    .main .big-title{
        line-height: 40px;
        font-size: 16px;
        color:#333;
        font-weight: 500;
    }
    .main .change{
        line-height: 100px;
    }
    .main .formmet{
        margin-top: 20px;
    }
    .main .show-list li{
        line-height: 50px;
    }
    .main .show-list li .left-p{
        margin-right: 4px;
        float:left;
    }
    .main .show-list li .center-p{
        float:left;
    }
    .main .show-list li .right-p{
        float:right;
    }
    .main .show-list li .reat-p{
        float:left;
        margin-left: 30px;
        border-radius: 100%;
        overflow: hidden;
    }
    .main .show-list li .reat-p .clear{
        border-radius: 100%;
        padding: 3px 3px;
    }
    .preview{
        margin: 20px 0;
    }
    .preview .wrap .title{
       font-size: 16px;
        font-weight: 500;
    }
    .preview .wrap ul li{
        line-height: 40px;
        width: 180px;
        color:#6d6c6c;
    }
    .preview .wrap ul li .right{
        float:right;
    }
    .operation{
        margin-top: 20px;
    }
</style>